<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Cookie 的属性</title>
  </head>
  <body>
    <script>
      // 1.Cookie 的名称（Name）和值（Value）
      // 最重要的两个属性，创建 Cookie 时必须填写，其它属性可以使用默认值

      // Cookie 的名称或值如果包含非英文字母，则写入时需要使用 encodeURIComponent() 编码，读取时使用 decodeURIComponent() 解码
      // document.cookie = 'username=alex';

      // document.cookie = `username=${encodeURIComponent('张三')}`;
      // document.cookie = `${encodeURIComponent('用户名')}=${encodeURIComponent(
      //   '张三'
      // )}`;

      // 一般名称使用英文字母，不要用中文，值可以用中文，但是要编码

      // 2.失效（到期）时间
      // 对于失效的 Cookie，会被浏览器清除
      // 如果没有设置失效（到期）时间，这样的 Cookie 称为会话 Cookie
      // 它存在内存中，当会话结束，也就是浏览器关闭时，Cookie 消失

      // document.cookie = 'username=alex';

      // 想长时间存在，设置 Expires 或 Max-Age
      // expires
      // 值为 Date 类型
      // document.cookie = `username=alex; expires=${new Date(
      //   '2100-1-01 00:00:00'
      // )}`;

      // max-age
      // 值为数字，表示当前时间 + 多少秒后过期，单位是秒
      // document.cookie = 'username=alex; max-age=5';
      // document.cookie = `username=alex; max-age=${24 * 3600 * 30}`;

      // 如果 max-age 的值是 0 或负数，则 Cookie 会被删除
      // document.cookie = 'username=alex';
      // document.cookie = 'username=alex; max-age=0';
      // document.cookie = 'username=alex; max-age=-1';

      // 3.Domain 域
      // Domain 限定了访问 Cookie 的范围（不同域名）

      // 使用 JS 只能读写当前域或父域的 Cookie，无法读写其他域的 Cookie
      // document.cookie = 'username=alex; domain=www.imooc.com';

      // www.imooc.com m.imooc.com 当前域
      // 父域：.imooc.com

      // 4.Path 路径
      // Path 限定了访问 Cookie 的范围（同一个域名下）

      // 使用 JS 只能读写当前路径和上级路径的 Cookie，无法读写下级路径的 Cookie
      // document.cookie = 'username=alex; path=/course/list';
      // document.cookie = 'username=alex; path=/1.Cookie/';

      // 当 Name、Domain、Path 这 3 个字段都相同的时候，才是同一个 Cookie

      // 5.HttpOnly
      // 设置了 HttpOnly 属性的 Cookie 不能通过 JS 去访问

      // 6.Secure 安全标志
      // Secure 限定了只有在使用了 https 而不是 http 的情况下才可以发送给服务端

      // Domain、Path、Secure 都要满足条件，还不能过期的 Cookie 才能随着请求发送到服务器端
    </script>
  </body>
</html>
